<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

	<!-- Definiendo la cabecera de la pagina -->
	<ui:define name="title">
		<h:outputText value="Apertura Cta. Aporte" />
	</ui:define>

	<!-- Definiendo el cuerpo de la pagina -->
	<ui:define name="content">

		<h:outputStylesheet library="css" name="main.css" />
		<h:outputScript library="js" name="angular.min.js"></h:outputScript>

		<script type="text/javascript">
			var sistemaFinancieroApp = angular.module('sistemaFinancieroApp', []);
			 
			sistemaFinancieroApp.controller('AperturaCuentaAporteCtrl', function ($scope) {
			  $scope.cmbTipopersonaSelectedValue = 1;
			  $scope.isPersonaNaturalSelected = false;
			  $scope.isPersonaJuridicaSelected = false;

			  $scope.changeCmbTipopersona = function(value) {
				if(value == 1){
					$scope.isPersonaNaturalSelected = true;
					$scope.isPersonaJuridicaSelected = false;
				} else {
					if(value == 2){
						$scope.isPersonaNaturalSelected = false;
						$scope.isPersonaJuridicaSelected = true;
					} else{
						$scope.isPersonaNaturalSelected = false;
						$scope.isPersonaJuridicaSelected = false;
					}
				}
			  }
			});
		</script>
		<div ng-app="sistemaFinancieroApp"
			ng-controller="AperturaCuentaAporteCtrl">
			<br />
			<div style="margin-left: 50px;">
				<div>
					<div>
						<div class="p6n-api-consent-screen-title">APERTURA DE CUENTA
							APORTE</div>
						<div class="p6n-api-consent-screen-inputs" style="float: none;">
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label" style="width: 150px;">
									TIPO DE PERSONA</div>
								<div>
									<h:form>
										<h:selectOneMenu id="cmbTipopersona"
											value="#{aperturaCuentaaporteBean.comboTipopersona.itemSelected}"
											valueChangeListener="#{aperturaCuentaaporteBean.changeTipopersona}"
											required="true" requiredMessage="Seleccione tipo de persona"
											pt:ng-model="cmbTipopersonaSelectedValue"
											pt:ng-change="changeCmbTipopersona(cmbTipopersonaSelectedValue)">
											<f:selectItems
												value="#{aperturaCuentaaporteBean.comboTipopersona.items.entrySet()}"
												var="val" itemLabel="#{val.value}" itemValue="#{val.key}" />
											<f:ajax></f:ajax>
										</h:selectOneMenu>
									</h:form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<br />
			<div id="divPersonaNatural"
				ng-show="{{cmbTipopersonaSelectedValue==1}}">
				<h:form>
					<div style="margin-left: 50px;">
						<div>
							<div>
								<div class="p6n-api-consent-screen-title">PERSONA NATURAL</div>
								<div class="p6n-api-consent-screen-inputs">
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Datos generales</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">TIPO
												DOCUMENTO</div>
											<div>
												<h:selectOneMenu id="cmbTipodocumento"
													value="#{aperturaCuentaaporteBean.comboTipodocumentoPersonanatural.itemSelected}"
													valueChangeListener="#{aperturaCuentaaporteBean.changeTipodocumentoPersonanatural}"
													required="true"
													requiredMessage="Seleccione tipo de documento">
													<f:selectItem itemLabel="--SELECCIONE--" itemValue="" />
													<f:selectItems
														value="#{aperturaCuentaaporteBean.comboTipodocumentoPersonanatural.items.entrySet()}"
														var="val" itemLabel="#{val.value.abreviatura}"
														itemValue="#{val.key}" />
													<f:ajax></f:ajax>
												</h:selectOneMenu>
											</div>
										</div>
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">NUMERO
												DOCUMENTO</div>
											<div>
												<h:inputText id="txtDni"
													value="#{aperturaCuentaaporteBean.numeroDocumentoPersonanatural}"
													required="true" maxlength="8" requiredMessage="Ingrese dni"
													validatorMessage="Número de DNI Invalido"
													onkeypress="if (event.keyCode == 13) {onchange(); return false; }">
													<f:validateRegex pattern="(^[0-9]{8}$)" />
													<f:ajax
														listener="#{aperturaCuentaaporteBean.buscarPersonanaturalSocio()}"
														render="@form"></f:ajax>
												</h:inputText>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="cmbTipodocumento" />
										<h:message for="txtDni" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">APELLIDO
												PATERNO</div>
											<div>
												<div>
													<h:inputText id="txtApellidoPaterno"
														value="#{aperturaCuentaaporteBean.apellidoPaterno}"
														required="true" maxlength="50"
														requiredMessage="Ingrese apellido paterno"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">APELLIDO
												MATERNO</div>
											<div>
												<div>
													<h:inputText id="txtApellidoMaterno"
														value="#{aperturaCuentaaporteBean.apellidoMaterno}"
														required="true" maxlength="50"
														requiredMessage="Ingrese apellido materno"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtApellidoPaterno" />
										<h:message for="txtApellidoMaterno" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">NOMBRES</div>
										<div>
											<div>
												<h:inputText id="txtNombres"
													value="#{aperturaCuentaaporteBean.apellidoMaterno}"
													required="true" maxlength="50"
													requiredMessage="Ingrese nombres"
													onkeyup="this.value = this.value.toUpperCase();"
													style="width:339px;">
												</h:inputText>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtNombres" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">SEXO</div>
											<div>
												<div>
													<h:selectOneMenu id="cmbSexo"
														value="#{aperturaCuentaaporteBean.comboSexo.itemSelected}"
														required="true" requiredMessage="Seleccione sexo">
														<f:selectItem itemLabel="--Seleccione--" itemValue="" />
														<f:selectItems
															value="#{aperturaCuentaaporteBean.comboSexo.items.entrySet()}"
															var="val" itemLabel="#{val.value.denominacion}"
															itemValue="#{val.key}" />
													</h:selectOneMenu>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">FECHA DE
												NACIMIENTO</div>
											<div>
												<div>
													<p:calendar id="txtFechanacimiento"
														value="#{aperturaCuentaaporteBean.fechaNacimiento}"
														navigator="true" pattern="dd/MM/yy" required="true"
														requiredMessage="Ingrese fecha de nacimiento"
														converterMessage="formato incorrecto">
														<f:convertDateTime pattern="dd/MM/yy" />
													</p:calendar>
												</div>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="cmbSexo" />
										<h:message for="txtFechanacimiento" />
									</div>
									<br />
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Datos adicionales</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">ESTADO CIVIL</div>
										<div>
											<div style="display: inline-block; width: 190px;">
												<div>
													<h:selectOneMenu id="cmbEstadocivil"
														value="#{aperturaCuentaaporteBean.comboEstadocivil.itemSelected}">
														<f:selectItem itemLabel="--Seleccione--" itemValue="" />
														<f:selectItems
															value="#{aperturaCuentaaporteBean.comboEstadocivil.items.entrySet()}"
															var="val" itemLabel="#{val.value.denominacion}"
															itemValue="#{val.key}" />
													</h:selectOneMenu>
												</div>
											</div>
											<div style="display: inline-block;">
												<div class="p6n-api-consent-screen-label">OCUPACION</div>
												<div>
													<div>
														<h:inputText value="#{aperturaCuentaaporteBean.ocupacion}" />
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">DIRECCION</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.direccionPersonanatural}"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">REFERENCIA</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.referenciaPersonanatural}"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">TELEFONO</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.telefonoPersonanatural}">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">CELULAR</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.celularPersonanatural}">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">EMAIL</div>
										<div>
											<div>
												<h:inputText
													value="#{aperturaCuentaaporteBean.emailPersonanatural}"
													style="width:339px;" />
											</div>
										</div>
									</div>
									<br />
									<div class="sf-buttons" style="float: left;">
										<h:commandButton value="Cancelar" immediate="true"
											styleClass="action" />
										<h:commandButton value="Siguiente »"
											action="aperturaCuentaaporte-flowA.xhtml" styleClass="action" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</h:form>
			</div>
			<div id="divPersonaJuridica" ng-show="isPersonaJuridicaSelected">
				<h:form>
					<div style="margin-left: 50px;">
						<div>
							<div>
								<div class="p6n-api-consent-screen-title">PERSONA JURIDICA</div>
								<div class="p6n-api-consent-screen-inputs">
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Datos generales</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">RUC</div>
										<div>
											<h:inputText id="txtRuc" required="true"
												value="#{aperturaCuentaaporteBean.numeroDocumentoPersonajuridica}"
												maxlength="11" requiredMessage="Ingrese Numero de RUC"
												validatorMessage="El RUC tiene 11 digitos">
												<f:validateLength minimum="11" />
											</h:inputText>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtRuc" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">RAZON SOCIAL</div>
											<div>
												<div>
													<h:inputText id="txtTazonsocial"
														value="#{aperturaCuentaaporteBean.apellidoPaterno}"
														required="true" maxlength="50"
														requiredMessage="Ingrese la razon social"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">NOMBRE
												COMERCIAL</div>
											<div>
												<div>
													<h:inputText id="txtNombrecomercial"
														value="#{aperturaCuentaaporteBean.nombreComercial}"
														maxlength="50"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtTazonsocial" />
										<h:message for="txtNombrecomercial" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">ACTIVIDAD
												PRINCIPAL</div>
											<div>
												<div>
													<h:inputText id="txtActividadprincipal"
														value="#{aperturaCuentaaporteBean.actividadPrincipal}"
														maxlength="50"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">FECHA
												CONSTITUCION</div>
											<div>
												<div>
													<p:calendar id="txtFechaconstitucion"
														value="#{aperturaCuentaaporteBean.fechaConstitucion}"
														navigator="true" pattern="dd/MM/yy" required="true"
														requiredMessage="Ingrese Fecha de constitucion"
														converterMessage="El formato de la fecha no es correcto">
														<f:convertDateTime pattern="dd/MM/yy" />
													</p:calendar>
												</div>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtActividadprincipal" />
										<h:message for="txtFechaconstitucion" />
									</div>
									<br />
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Datos comerciales</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">TIPO EMPRESA</div>
											<div>
												<div>
													<h:selectOneMenu id="cmbTipoempresa"
														value="#{aperturaCuentaaporteBean.comboTipoempresa.itemSelected}">
														<f:selectItem itemLabel="--Seleccione--" itemValue="" />
														<f:selectItems
															value="#{aperturaCuentaaporteBean.comboTipoempresa.items.entrySet()}"
															var="val" itemLabel="#{val.value.denominacion}"
															itemValue="#{val.key}" />
													</h:selectOneMenu>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">FIN SOCIAL</div>
											<div>
												<div>
													<h:selectOneMenu id="cmbFinsocial"
														value="#{aperturaCuentaaporteBean.comboFinsocial.itemSelected}">
														<f:selectItem itemLabel="--Seleccione--" itemValue="" />
														<f:selectItems
															value="#{aperturaCuentaaporteBean.comboFinsocial.items.entrySet()}"
															var="val" itemLabel="#{val.value.denominacion}"
															itemValue="#{val.key}" />
													</h:selectOneMenu>
												</div>
											</div>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="cmbTipoempresa" />
										<h:message for="cmbFinsocial" />
									</div>
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Datos adicionales</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">DIRECCION</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.direccionPersonajuridica}"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">REFERENCIA</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.referenciaPersonajuridica}"
														onkeyup="this.value = this.value.toUpperCase();">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div style="display: inline-block; width: 190px;">
											<div class="p6n-api-consent-screen-label">TELEFONO</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.telefonoPersonajuridica}">
													</h:inputText>
												</div>
											</div>
										</div>
										<div style="display: inline-block;">
											<div class="p6n-api-consent-screen-label">CELULAR</div>
											<div>
												<div>
													<h:inputText
														value="#{aperturaCuentaaporteBean.celularPersonajuridica}">
													</h:inputText>
												</div>
											</div>
										</div>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">EMAIL</div>
										<div>
											<div>
												<h:inputText
													value="#{aperturaCuentaaporteBean.emailPersonajuridica}"
													style="width:339px;" />
											</div>
										</div>
									</div>
									<br /> <br />
									<div class="sf-buttons" style="float: left;">
										<h:commandButton value="Cancelar" immediate="true"
											styleClass="action" />
										<h:commandButton value="Siguiente »"
											action="aperturaCuentaaporte-flowA.xhtml" styleClass="action" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</h:form>
			</div>
		</div>
	</ui:define>

</ui:composition>
</html>